<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
  >
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
      stroke-linecap="round"
      d="M4.76001 1.83L8.08002 5.16"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
      stroke-linecap="round"
      d="M13.92 1.83L17.24 5.16"
    ></path>
    <path
      d="M19.61 9.35776C20.84 9.35776 21.83 9.50768 21.83 7.35888C21.83 5.50992 20.84 5.36 19.61 5.36L4.05002 5.36C2.82002 5.36 1.83002 5.50992 1.83002 7.35888C1.83002 9.50768 2.82002 9.35776 4.05002 9.35776L19.61 9.35776Z"
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linecap="round"
      d="M8.95001 12.83L8.95001 16.08"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linecap="round"
      d="M13.16 12.83L13.16 16.08"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      d="M3.21002 9.17L4.62 17.81C4.93994 19.75 5.71004 21.17 8.56995 21.17L14.6 21.17C17.71 21.17 18.17 19.81 18.5301 17.93L20.21 9.17"
    ></path>
    <g opacity="0.0001"></g>
  </svg>
</template>

<script>
  import config from './config' // 导入配置文件
  const { transionDuration, activeColor, inactiveColor } = config

  export default {
    name: 'operation-data-svg',
    props: {
      active: { default: false },
      transiton: {
        type: Number,
        default: transionDuration,
      },

      activeColor: {
        type: String,
        default: activeColor,
      },
      inactiveColor: {
        type: String,
        default: inactiveColor,
      },
    },
    computed: {
      style() {
        return { transition: `stroke ${this.transiton}s ease` }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
